<template>
  <div class="home">
    <header class="header">
      <div class="title-container">
        <img src="../assets/logo.png" alt="Logo" class="site-logo" />
        <h1 class="site-title">Intelli-DL Logo 设计平台</h1>
      </div>
      <div class="auth-section">
        <div class="user-icon-container" @click="handleUserIconClick">
          <i class="user-icon">👤</i>
          <div class="user-menu" v-if="showUserMenu && isLoggedIn">
            <router-link to="/user-profile">个人信息</router-link>
            <router-link to="/edit-profile">修改个人信息</router-link>
            <a href="#" @click.prevent="handleLogout">退出登录</a>
          </div>
        </div>
      </div>
      
      <!-- 登录/注册弹窗 -->
      <AuthModal 
        :show="showAuthModal" 
        @close="showAuthModal = false"
        @login-success="handleLoginSuccess"
        @register-success="handleLoginSuccess"
      />
    </header>
    
    <section class="hero-section">
      <div class="hero-content">
        <h2 class="hero-title">AI驱动的专业Logo设计</h2>
        <p class="hero-description">只需几秒钟，获得独特的品牌标识</p>
        <div class="quick-generate">
          <input 
            v-model="quickInput" 
            placeholder="输入品牌名称快速生成Logo"
            @keyup.enter="handleQuickGenerate"
          />
          <button @click="handleQuickGenerate">立即生成</button>
        </div>
      </div>
    </section>
    
    <section class="features-section">
      <h2 class="section-title">为什么选择我们</h2>
      <div class="features-grid">
        <div class="feature-item">
          <div class="feature-icon">⚡</div>
          <h3>快速生成</h3>
          <p>几秒钟内获得多种设计方案</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🎨</div>
          <h3>专业设计</h3>
          <p>AI算法确保每个Logo都符合设计原则</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">💼</div>
          <h3>商业可用</h3>
          <p>所有设计均可用于商业用途</p>
        </div>
      </div>
    </section>
    
    <section class="examples">
      <h2 class="section-title">设计案例展示</h2>
      <div class="example-grid">
        <div class="example-item">
          <img src="https://via.placeholder.com/300/007acc" alt="科技Logo示例" />
          <p>科技公司Logo</p>
        </div>
        <div class="example-item">
          <img src="https://via.placeholder.com/300/795548" alt="餐饮Logo示例" />
          <p>咖啡店Logo</p>
        </div>
        <div class="example-item">
          <img src="https://via.placeholder.com/300/4caf50" alt="健身Logo示例" />
          <p>健身中心Logo</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import AuthModal from '../components/AuthModal.vue';

export default defineComponent({
  name: 'HomeView',
  components: {
    AuthModal
  },
  setup() {
    const router = useRouter();
    const quickInput = ref('');
    const showUserMenu = ref(false);
    const showAuthModal = ref(false);
    const isLoggedIn = ref(false);
    const userInfo = ref({
      email: '',
      nickname: ''
    });
    
    // 在组件挂载时检查登录状态
    onMounted(() => {
      isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true';
      userInfo.value.email = localStorage.getItem('userEmail') || '';
      userInfo.value.nickname = localStorage.getItem('userNickname') || '';
    });
    
    const handleQuickGenerate = () => {
      // 快速生成逻辑
      console.log('快速生成:', quickInput.value);
    };
    
    const handleUserIconClick = () => {
      if (isLoggedIn.value) {
        // 已登录，显示用户菜单
        showUserMenu.value = !showUserMenu.value;
      } else {
        // 未登录，显示登录/注册弹窗
        showAuthModal.value = true;
        showUserMenu.value = false;
      }
    };
    
    const handleLoginSuccess = () => {
      // 登录成功后更新状态
      isLoggedIn.value = true;
      userInfo.value.email = localStorage.getItem('userEmail') || '';
      userInfo.value.nickname = localStorage.getItem('userNickname') || '';
    };
    
    const handleLogout = () => {
      // 登出逻辑
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('userEmail');
      localStorage.removeItem('userNickname');
      isLoggedIn.value = false;
      showUserMenu.value = false;
      console.log('用户登出');
    };

    return {
      quickInput,
      handleQuickGenerate,
      showUserMenu,
      showAuthModal,
      isLoggedIn,
      userInfo,
      handleUserIconClick,
      handleLoginSuccess,
      handleLogout
    };
  }
});
</script>

<style scoped>
.home {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}

.auth-section {
  display: flex;
  gap: 0.5rem;
}

.auth-section a {
  color: #007acc;
  text-decoration: none;
  font-weight: 500;
}

.user-icon-container {
  position: relative;
  cursor: pointer;
}

.user-icon {
  font-size: 1.5rem;
  color: #007acc;
}

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  min-width: 150px;
  z-index: 100;
}

.user-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: #333;
  text-decoration: none;
}

.user-menu a:hover {
  background-color: #f5f5f5;
}

.hero-section {
  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  color: white;
  padding: 4rem 2rem;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.quick-generate {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.quick-generate input {
  padding: 1rem 1.5rem;
  width: 400px;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.quick-generate button {
  padding: 1rem 1.5rem;
  background-color: #ff6b00;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.quick-generate button:hover {
  background-color: #e05d00;
}

.features-section {
  padding: 4rem 2rem;
  background-color: #f9f9f9;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 2rem;
  color: #333;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-item {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.examples {
  padding: 4rem 2rem;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.example-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.example-item:hover {
  transform: translateY(-5px);
}

.example-item img {
  width: 100%;
  height: auto;
  display: block;
}

.example-item p {
  padding: 1rem;
  margin: 0;
  background-color: white;
  font-weight: 500;
}

@media (max-width: 768px) {
  .features-grid, .example-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-generate {
    flex-direction: column;
    align-items: center;
  }
  
  .quick-generate input {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 1rem;
  }
  
  .quick-generate button {
    width: 100%;
    border-radius: 4px;
  }
}

.title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
</style>